<template>
  <div class="bg">
    <van-steps direction="vertical" :active="6" :active-color="activeColor">
      <van-step>
        <h3>点击底部按钮进入商户小程序</h3>
        <div class="slot-icon" slot="finish-icon">1</div>
      </van-step>
      <van-step>
        <h3>默认获取当前手机号和密码自动登录小程序</h3>
        <div class="slot-icon" slot="finish-icon">2</div>
      </van-step>
      <van-step>
        <h3>进入小程序后先把门店内容补充齐全，让门店能在用户小程序展示</h3>
        <div class="slot-icon" slot="finish-icon">3</div>
      </van-step>
      <van-step>
        <h3>最后就是上传商品，等用户下单购买</h3>
        <div class="slot-icon" slot="finish-icon">4</div>
      </van-step>
    </van-steps>
    <div class="footer">
      <div class="_button">
        <van-button
          :color="activeColor"
          size="large"
          style="border-radius: 40px;margin: 0 auto;height: 100%"
          @click="handleJumpMiniProgram"
          >登录商户小程序</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { AppUtils } from "@/utils/appJavascriptBridge";
export default {
  name: "index",
  computed: {
    merchant() {
      return this.$route.query ? this.$route.query : {};
    },
  },
  data() {
    return {
      pubUrl: process.env.VUE_APP_PUB_MERC_PC,
      activeColor: "#ffb72f",
    };
  },
  methods: {
    handleJumpMiniProgram() {
      const appJavascriptBridge = new AppUtils();
      // 四要素
      // 1、小程序的appId（应用(App)的 AppId，非小程序的 AppID）
      // 2、小程序原始id
      // 3、跳转的小程序路劲与参数
      // 4、跳转的小程序版本（ 开发版 1，体验版 2，正式版 0）
      const params = {
        // appId: process.env.VUE_APP_PUB_MERCHANT_MINI_PROGRAM_APPID,
        id: process.env.VUE_APP_PUB_MERCHANT_MINI_PROGRAM_ORIGIN_APPID,
        path: "pages/home/index",
        version: process.env.NODE_ENV !== "production" ? 2 : 0,
      };
      console.log("四要素", params);
      console.log("appJavascriptBridge", appJavascriptBridge);
      appJavascriptBridge.callFnc(
        "handleJumpPubMerchantMiniProgram",
        JSON.stringify(params)
      );
    },
  },
};
</script>

<style scoped lang="less">
.bg {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #ffb72f;
}
.slot-icon {
  width: 34px;
  height: 34px;
  line-height: 34px;
  background: #ffb72f;
  border-radius: 50%;
  color: white;
  text-align: center;
}
/deep/.van-step__title {
  margin-bottom: 48px;
}
.footer {
  position: fixed;
  width: 100vw;
  height: 80px;
  bottom: 20px;
  ._button {
    width: 690px;
    margin: 0 auto;
    height: 100%;
  }
}
</style>
